<template>
  <div class="loginOuter">
    <div class="login_box">
      <form class="loginFrom">
        <span class="topName">登 录</span>
        <div class="input_box">
          <input
            type="text"
            maxlength="11"
            placeholder="请输入手机号"
            v-model="tel"
          >
        </div>
        <div class="input_box">
          <input type="password" maxlength="29" placeholder="请输入登录密码" v-model="password">
        </div>
        <div class="LoginDetection" v-show="showLogin">用户名或者密码错误，请检查重新输入</div>
        <el-radio-group v-model="radio" style="margin-top: 3vh">
          <el-radio label="user"><span class="loginRadio">用户</span></el-radio>
          <el-radio label="admin"><span class="loginRadio">管理员</span></el-radio>
        </el-radio-group>
        <button @click.prevent="loginGo">登录</button>
        <div class="forgetPasswd">
          <router-link to="/register">注册账号</router-link>
          <a href="javascript:0;">忘记密码？</a>
        </div>
        <div class="agreementSigned">
          登录视为您已同意<a href="javascript:0;">第三方账号绑定相关协议</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import {reqAdminLogin, reqLogin} from "../../api";

export default {
  name: "Login",
  data(){
    return{
      tel:'',
      password:'',
      showLogin:false,
      radio: 'user'
    }
  },
  methods:{
    async loginGo() {
      //用户登录检测电话号码
      this.showLogin = false
      let phoneNumber = /^1[3-9][0-9]{9}$/
      if (!phoneNumber.test(this.tel) && this.radio === 'user') {
        this.showLogin = true
        return null
      }

      const {tel, password,radio} = this;
      if (radio === 'user'){
        //用户登录
        let result = await reqLogin({tel, password})
        if (result.msg) {
          alert(result.msg)
        }else{
          let userId = result.data.id
          localStorage.setItem("USERTOKEN",userId)
          this.$router.push({
            name: 'home'
          })
        }
      }else {
        // 管理员登录
        let username = tel
        let result = await reqAdminLogin({username, password})
        if (result.msg) {
          alert(result.msg)
        }else{
          let adminId = result.data.id
          localStorage.setItem("ADMINTOKEN",adminId)
          this.$router.push({
            name: 'backstage'
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.topName{
  font-size: 2vw;
  color: #ffffff90;
}
.loginOuter{
  width: 100vw;
  height: 100vh;
  background-image: url("./images/loginBackground.jpg");
}

.login_box {
  display: flex;
  width: 20vw;
  background-color: rgba(21, 20, 20, 0.38);
  margin: 12vh auto auto auto;
  text-align: center;
  border-radius: 10px;
  padding: 4.5vh 3vw;
}

.loginFrom{
  margin: auto;
}

.input_box input {
  border: 0;
  width: 12vw;
  font-size: 1vw;
  color: #ffffff90;
  background: transparent;
  border-bottom: 1px solid #fff;
  padding: 1vh 1vw;
  outline: none;
  margin-top: 2vh;
}

button {
  padding: 0.5vh 0;
  margin-top: 3vh;
  width: 12vw;
  border-radius: 10px;
  border: 0;
  color: #ffffff90;
  text-align: center;
  /*line-height: 4vh;*/
  font-size: 1.2vw;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

.LoginDetection{
  width: 12vw;
  text-align: left;
  color: darksalmon;
  font-size: 0.7vw;
  padding: 0.3vh 1vw;
}

.forgetPasswd{
  display: flex;
  justify-content: space-around;
  margin-top: 2vh;
}

a{
  text-decoration-line: none;
  font-size: 0.8vw;
  color: #ffffff90;
}
.agreementSigned{
  margin-top: 10vh;
  font-size: 0.8vw;
  color: #ffffff90;
}

.loginRadio{
  font-size: 0.8vw !important;
}
</style>
